
<template>
    <div class="personal">
        <bk-container>
            <bk-row>
                <bk-col :span="12">
                    <!-- card1 start -->
                    <bk-card>
                        <div slot="header">
                            <div class="header">
                                <span class="title">个人中心</span>
                            </div>
                        </div>
                        <p>用户名：{{userInfo.username}}</p>
                        <p>学号/工号：{{ userInfo.class_number }}</p>
                        <p>姓名：{{ userInfo.name }}</p>
                        <p>性别：{{ userInfo.gender }}</p>
                        <p>身份：{{ userInfo.identity }}</p>
                        <p>学院：{{ userInfo.affiliated_college }}</p>
                        <p>专业班级：{{ userInfo.professional_class }}</p>
                    </bk-card>
                    <!-- card1 end -->
                </bk-col>
                <bk-col :span="12">
                    <!-- card2 start -->
                    <bk-card>
                        <div slot="header">
                            <div class="header">
                                <span class="title">联系方式</span>
                                <bk-link theme="primary" @click="isFormDialog = true"
                                >修改</bk-link
                                >
                            </div>
                        </div>

                        <p class="my-flex">手机号：{{ userInfo.phone_number }}</p>
                        <p>邮箱：{{ userInfo.email_number }}</p>
                        <p>企鹅号：{{ userInfo.qq_number }}</p>
                        <p>微信号：{{ userInfo.wechat_number }}</p>
                        <p style="color: transparent">1</p>
                        <p style="color: transparent">1</p>
                    </bk-card>
                    <!-- card2 end -->
                </bk-col>
            </bk-row>
        </bk-container>

        <!-- from dialog start -->
        <bk-dialog
            width="70%"
            v-model="isFormDialog"
            theme="primary"
            :mask-close="false"
            header-position="left"
            title="编辑"
            @confirm="handleConfirmClick"
        >
            <!-- form start -->
            <bk-form :label-width="80" :model="userInfo">
                <bk-container>
                    <bk-row>
                        <bk-col :span="12" v-for="item in formConfig" :key="item.field">
                            <bk-form-item :label="item.label" :required="true">
                                <bk-input
                                    :disabled="item.disabled"
                                    v-model="userInfo[item.field]"
                                ></bk-input>
                            </bk-form-item>
                        </bk-col>
                    </bk-row>
                </bk-container>
            </bk-form>
            <!-- form end -->
        </bk-dialog>
    <!-- from dialog end -->
    </div>
</template>

<script>
// 表单配置
    import { formConfig } from './modal.config.js'
    export default {
        data () {
            return {

                // dialog
                isFormDialog: false,

                // 表单配置
                formConfig: formConfig,

                // 用户信息
                userInfo: {
                    username: '余晖',
                    class_number: 3200911027,
                    name: '黄钰茵',
                    gender: '女',
                    identity: '学生',
                    affiliated_college: '计算机科学与工程学院',
                    professional_class: '软件202',
                    phone_number: '19522440690',
                    email_number: '2429632165@qq.com',
                    qq_number: '2429632165',
                    wechat_number: 'wineyci-cloud'
                }
            }
        },
        created () {
            // 调用api请求
            this.getUserInfoResult()
            // this.changeUserInfoResult()
        },

        methods: {
            // 请求事件
            async getUserInfoResult () {
                const url = '/account/get_user_info/'
                const res = await this.$http.get(url)
                this.userInfo = res.data
            },
            // post修改事件
            async changeUserInfoResult () {
                await this.$http.post('/account/store_user_info/', this.userInfo)
                await this.getUserInfoResult()
            },

            // 点击事件
            handleConfirmClick () {
                this.changeUserInfoResult()
            }

        }
    }
</script>

<style>
    @import "index.css";
</style>
